<!--用户列表-->
<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
  <head th:replace="fragments/layout::head">
  </head>
<body class="hold-transition sidebar-mini">

<!-- Site wrapper -->
<div class="wrapper" >
  <!-- Navbar 顶部水平导航栏-->
  <nav th:replace="fragments/layout::topNav"></nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container  侧边导航栏-->
  <aside th:replace="fragments/layout::adminAside"></aside>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" id="app">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>用户信息一览</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/admin/home">Home</a></li>
              <li class="breadcrumb-item active">用户列表</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">



      <!-- Default box -->

      <div class="card">
        <div class="card-header">

          <div style="margin: 5px;">
            <!--            内容显示主要面板-->
            <button class="input-group-text" @click="searchuser"><i class="fa fa-search">查询</i></button>
            <input style="float:left;" type="text" v-model="searchusername"  class="input-group-text" placeholder="用户名" @keyup.enter="searchuser">


            <a style="float:left;margin-left: 20px;" class="btn btn-warning" data-toggle="modal" data-target="#addUser"> <i class="fa fa-plus"></i> 添加用户</a>


            <!-- 模态框 -->
            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"  id="addUser">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">

                  <!-- 模态框头部 -->
                  <div class="modal-header">
                    <h4 class="modal-title">添加用户</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>

                  <!-- 模态框主体 -->
                  <div class="modal-body">

                    <table class="table table-active">
                        <td>用户名:<input type="text" name="username" id="username"
                                       class="form-control" placeholder="用户名"
                                       v-model="user.username"/>
                        </td>
                        <tr></tr>
                        <td>用户密码:<input type="password"
                                        class="form-control" placeholder="密码"
                                        v-model="user.password"/></td>
                        <tr></tr>
                        <td>用户邮箱:<input type="text" id="email"
                                        class="form-control" placeholder="邮箱"
                                        v-model="user.email"/></td>
                    </table>

                  </div>

                  <!-- 模态框底部 -->
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"  @click="inserted(userinfo)">添加</button>
                  </div>

                </div>
              </div>
            </div>

          </div>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
              <i class="fas fa-minus"></i></button>
<!--            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">-->
<!--              <i class="fas fa-times"></i></button>-->
          </div>
        </div>
        <div class="card-body">

          <table id="table" class="table-striped table-bordered">
          </table>



          <!-- 模态框 -->
          <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"  id="myModal">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                  <h4 class="modal-title">用户详情</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                  <table class="table table-active">
                    <td>用户ID:{{userinfo.id}}</td>
                    <tr></tr>
                    <td>用户名:{{userinfo.username}}</td>
                    <tr></tr>
<!--                    <td>用户密码:{{userinfo.password}}</td>-->
                    <tr></tr>
                    <td>用户邮箱:{{userinfo.email}}</td>
                    <tr></tr>
                    <td>用户创建时间:{{userinfo.created}}</td>
                  </table>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

              </div>
            </div>
          </div>

          <!-- 模态框 -->
          <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"  id="editUser">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                  <h4 class="modal-title">编辑用户信息</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                  <table class="table table-active">
                    <td>用户名:<input type="text"  class="form-control" placeholder="用户名" v-model="userinfo.username"/></td>
                    <tr></tr>
<!--                    <td>用户密码:<input type="text"  class="form-control" placeholder="密码" v-model="userinfo.password"/></td>-->
                    <tr></tr>
                    <td>电子邮箱:<input type="text"  class="form-control" placeholder="邮箱" v-model="userinfo.email"/></td>
                  </table>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="edited(userinfo.id)">确认</button>
                </div>

              </div>
            </div>
          </div>

          </div>

        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          408 TicketManageSystem
        </div>
        <!-- /.card-footer-->

      <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


<!--  <div style="" id="rocket-to-top">-->
<!--    <div style="opacity: 0; display: block;" class="level-2"></div>-->
<!--    <div class="level-3"></div>-->
<!--  </div>-->


  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->

  <footer th:replace="fragments/layout::footer"></footer>

</div>
<!-- ./wrapper -->


<!--app-->

<script th:src="@{/site/js/userList.js}"></script>


</body>
</html>
